<template>
  <div class="Vocabulary" :style="{backgroundColor:Styles.backgroundColor}">
    <div class="content">
      <div class="" v-if="Vocabulary && Vocabulary.word_list.length>0">
        <div class="List-title" :style="{color:Styles.color}">
          核心词汇
        </div>
        <div class="List-content">
          <List :Styles="Styles" v-if="Vocabulary" v-for="(a,i) in Vocabulary.word_list" :obj="a" :key="i"
                :icon="a.usa_voice_url!=='-1'"></List>
        </div>
      </div>
      <div class="" v-if="Vocabulary && Vocabulary.phrase_list.length>0">
        <div class="List-title" :style="{color:Styles.color}">
          核心短语
        </div>
        <div class="List-content">
          <List :Styles="Styles" v-if="Vocabulary" v-for="(a,i) in Vocabulary.phrase_list" :obj="a" :key="i"
                :icon="false"></List>
        </div>
      </div>
      <div class="nulls" v-if="Vocabulary && Vocabulary && Vocabulary.word_list.length===0&&Vocabulary.phrase_list.length===0">
        <p><i class="iconfont icon-kongbai"></i></p>
        <p>本章暂无核心词汇哦</p>
      </div>
      <div class="Foot" @click="Click('hide')" :style="{backgroundColor:Styles.backgroundColor,color:Styles.color}"
           :class="{'imgse':Styles.mode===1,'imge':Styles.mode===2}">
        <i class="iconfont icon-danchuang-guanbi" :style="{color:Styles.color}"></i>
      </div>
    </div>
  </div>
</template>

<script>
  import List from './components/List/index'

  export default {
    name: "index",
    props: ['Vocabulary', 'Styles'],
    components: {List},
    mounted: function () {
    },
    methods: {
      Click: function (str) {
        this.$emit(str)
      }
    }
  }
</script>

<style scoped>
  @import "./css/index.css";
</style>
